<template>
  <div style="width:100%;height:100%;">
    <el-menu class="el-menu-demo" mode="horizontal" style="height:8%;width:100%;">
      <div style="width:100%;height:100%;background-color:#F8F8FF">
          <el-col :span="12" style="width:90%;height:100%">
            <div class="grid-content bg-purple" style="text-align:center;width:30%;height:80%;margin-top:10px;">
              <span style="font-weight:bold;font-size:35px;-webkit-text-stroke:1px black;-webkit-text-fill-color:transparent">高校团“萌”管理系统</span>
            </div>
          </el-col>
          <el-col :span="10" style="width:10%;height:100%">
            <div class="grid-content bg-purple-light" style="margin-top:10px">
              <el-button @click="SignOut()">退出登录</el-button>
            </div>
          </el-col>
      </div>
    </el-menu>
    <el-row style="width:100%;height:92%;">
      <el-col :span="4" style="height:100%">
        <div class="grid-content bg-purple" style="height:100%;">
          <el-menu
              style="width:100%;height:100%;background-color:#F8F8FF"
              :default-active="$route.path"
              class="el-menu-vertical-demo"
              :router="true">
              <!--  导航条: -->
              <el-menu-item index="/showIndex">
                <i class="el-icon-s-home"></i>
                <span slot="title" style="font-weight:bold">首页</span>
              </el-menu-item>
              <el-menu-item index="/systempage">
                <i class="el-icon-menu"></i>
                <span slot="title" style="font-weight:bold">活动中心</span>
              </el-menu-item>
              <el-submenu index="/addassion">
                <template slot="title">
                  <i class="el-icon-office-building"></i>
                  <span style="font-weight:bold;">社团中心</span>
                </template>
                <el-menu-item-group style="background-color:#F8F8FF">
                  <el-menu-item index="/addassion">加入社团</el-menu-item>
                  <el-menu-item index="/myassion">我的社团</el-menu-item>
                  <el-menu-item index="/myassionaction">我参与的活动</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-user"></i>
                  <span style="font-weight:bold">个人中心</span>
                </template>
                <el-menu-item-group style="background-color:#F8F8FF">
                  <el-menu-item index="1-2">个人信息</el-menu-item>
                  <el-menu-item index="1-1">修改密码</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
        </div>
      </el-col>
      <el-col :span="20" style="height:100%">

<!-- 显示子页面 -->
        <router-view/>
      </el-col>
    </el-row>
  </div>
</template>



<style>
  .avatar-uploader .el-upload {
    
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

</style>



<script>
  export default {
    data() {
      return {
        isCollapse: true,
        
      };
    },
    created(){
      
    },
    methods:{
      SignOut(){ 
        var left=this.$router;
        //询问框
        layer.confirm('您确定要退出当前系统嘛？', {
          btn: ['确定','取消'] //按钮
        }, function(){  
          left.push("/");
          layer.msg({
            time: 200, 
          });
        }, function(){
          layer.msg('取消成功', {
            time: 2000, 
          });
        });
      },
    }
  }
</script>